<template>
  <view>
    <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="black" :bar-style="{ background: '#deac71' }" inactive-color="#b8b8b8"> </u-tabs>

    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
      <good-list :list="goods" @refundOrder="refundOrder" @completeOrder="completeOrder" @goodsReset="goodsReset"></good-list>
    </mescroll-body>
    <!-- 取消订单模态框 -->
    <u-modal v-model="show" :content="content" @confirm="confirmRefund" :show-cancel-button="true">
      <!-- <u-input v-model="content" type="text" :border="true" /> -->
    </u-modal>
    <!-- 确认完成服务 -->
    <u-modal v-model="completeShow" :content="content" @confirm="confirmComplete" :show-cancel-button="true"></u-modal>
    <!-- 提示 -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      goods: [], // 数据列表
      content: "",
      show: false,
      completeShow: false,
      order: {},
      list: [{ name: "预约用车" }, { name: "接送机" }, { name: "包车" }, { name: "港澳用车" }, { name: "顺风车" }],
      current: 0,
    };
  },
  // that = this;
  onLoad() {
    let that = this;
  },
  methods: {
    change(index) {
      this.current = index;
      this.getOrder()
    },
    getOrder() {
      this.$u.get(`/appOrder/order/getOrder`, { pageNo: 1, pageSize: 15 })
        .then(res => {
          console.log("rr", res);
          this.mescroll.endSuccess(res.result);
          //设置列表数据
          this.goods = []; //如果是第一页需手动制空列表
          setTimeout(()=>{
            this.goods = this.goods.concat(res.result.records); //追加新数据
          },1000)
        })
        .catch((err) => {
          console.log("错误了", err);
          //关闭下拉加载
          this.mescroll.endErr();
        });
    },
    goodsReset() {
      this.mescroll.resetUpScroll();
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      console.log("pppp", page);
      // 此处可以继续请求其他接口
      // if(page.num == 1){
      // 	// 请求其他接口...
      // }

      // 如果希望先请求其他接口,再触发upCallback,可参考以下写法
      // if(!this.isInitxx){
      // 	apiGetxx().then(res=>{
      // 		this.isInitxx = true
      // 		this.mescroll.resetUpScroll() // 重新触发upCallback
      // 	}).catch(()=>{
      // 		this.mescroll.endErr()
      // 	})
      // 	return // 此处return,先获取xx
      // }
      // ${page.num}/${page.size}
      this.$u
        .get(`/appOrder/order/getOrder`, { pageNo: page.num, pageSize: page.size })
        .then((res) => {
          console.log("rr", res);
          this.mescroll.endSuccess(res.result);
          //设置列表数据
          if (page.num == 1) this.goods = []; //如果是第一页需手动制空列表
          this.goods = this.goods.concat(res.result.records); //追加新数据
        })
        .catch((err) => {
          console.log("错误了", err);
          //关闭下拉加载
          this.mescroll.endErr();
        });
    },
    refundOrder(order) {
      this.order = order;
      if (this.order.payStatus == "1") {
        this.content = "您确认取消订单？";
      } else {
        this.content = "司机正在赶来的路上，您确认取消订单？";
      }
      this.show = true;
    },
    completeOrder(order) {
      this.order = order;
      this.content = "您确认完成订单？";
      this.completeShow = true;
    },
    confirmRefund() {
      let that = this;
      let text = "";
      if (this.order.payStatus == "1") {
        text = "取消订单成功";
      } else {
        text = "申请退款成功";
      }
      let cancelInfo = {
        orderId: this.order.id,
        actionType: 1,
        cancelReason: "乘客取消",
      };
      this.$u.post(`/vehicleService/order/cancel`, cancelInfo).then((data) => {
        that.$refs.uToast.show({
          title: text,
          type: "success",
          icon: false,
        });
        that.mescroll.resetUpScroll();
      });
    },
    confirmComplete() {
      this.$u.post(`/orderManager/confirmService/${this.order.id}`).then((data) => {
        this.$refs.uToast.show({
          title: "操作成功",
          type: "success",
          icon: false,
        });
        this.mescroll.resetUpScroll();
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
}
</style>
